/*
 * Copyright © 2021-2023 Innospots (http://www.innospots.com)
 *  Licensed to the Apache Software Foundation (ASF) under one or more
 *  contributor license agreements.  See the NOTICE file distributed with
 *  this work for additional information regarding copyright ownership.
 *  The ASF licenses this file to You under the Apache License, Version 2.0
 *  (the "License"); you may not use this file except in compliance with
 *  the License. You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import '~antd/es/style/themes/index.less';
@import "../../var";

@execution-height: 286px;
@execution-header-height: 44px;

.container {
  display: flex;

  :global {
    [data-type="Resizer"] {
      position: relative;
      background-color: transparent;

      &:hover {
        border: 0;
      }

      &:after {
        top: 50%;
        left: 0;
        width: 6px;
        height: 19px;
        content: '';
        display: block;
        position: absolute;
        margin: -10px 0 0 -5px;
        background: url("../../../../assets/images/common/Resizer.svg");
      }
    }
  }

  .paramConfig {
    width: 320px;
    height: 100%;
    background-color: #f6fafd;
    border-right: 4px solid @background-border-color;
    border-top-left-radius: @builder-border-radius;
    border-bottom-left-radius: @builder-border-radius;
  }

  .rightContent {
    flex: auto;
    height: calc(100% - @execution-header-height - 1px);

    .mainContent {
      height: 100%;

      .mainConfig {
        width: 100%;
        height: 100%;
        display: flex;

        .codeEditor {
          flex: auto;
          height: 100%;
        }

        .nodePreview {
          flex: 0 0 320px;
          height: 100%;
        }
      }
    }

    .executionItems {
      height: @execution-header-height;

      .executionHeader {
        height: @execution-header-height;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid @background-border-color;
      }

      .executionContent {
        height: @execution-height - @execution-header-height;
        display: none;
      }
    }

    &.showResult {
      height: calc(100% - @execution-height);

      .executionItems {
        height: @execution-height;

        .executionHeader {
          border-bottom: 1px solid @light-border-color;
        }

        .executionContent {
          height: 100%;
          display: block;
          overflow-y: auto;
        }
      }
    }
  }
}